<template>
  <div class="lwq-tooltip-demo">
    <!-- popper的试用 -->
    <!-- <img src="../../assets/logo.svg" alt="vue logo" width="125" height="125" ref="triggerNode">
    <div ref="overlayNode">tooltip</div> -->
    <lwq-tooltip content="测试popper">
        <lwq-button>下边</lwq-button>
    </lwq-tooltip>
    <lwq-tooltip content="测试popper" placement="right">
        <lwq-button>右边</lwq-button>
    </lwq-tooltip>
    <lwq-tooltip  placement="right" :trigger="trigger">
         <lwq-button>右边</lwq-button>
        <template #content>
          <h1>hello popper</h1>
        </template>
    </lwq-tooltip>
    <lwq-tooltip content="click tip" trigger="click">
        <lwq-button>click</lwq-button>
    </lwq-tooltip>
    <br><br>
    <lwq-tooltip ref="tooltipInstance" content="手动触发 tip" trigger="click" manual :popper-options="options">
        <lwq-button>手动触发</lwq-button>
    </lwq-tooltip>
    <lwq-button @click="open">open</lwq-button>
    <lwq-button @click="close">close</lwq-button>

    <lwq-tooltip content="delay tip" :open-delay="1000" :close-delay="1000">
        <lwq-button>延时</lwq-button>
    </lwq-tooltip>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import LwqTooltip from './Tooltip.vue';
import LwqButton from '../Button/Button.vue'
import { createPopper, type Instance, type Options } from '@popperjs/core';
import type { TooltipInstance } from './types';
defineOptions({
  name: 'LwqTooltipDemo'
})
const overlayNode = ref<HTMLElement>();
const triggerNode = ref<HTMLElement>();
const tooltipInstance = ref<TooltipInstance | undefined>();
let popperInstance: Instance | null = null;
const trigger = ref<'click' | 'hover'>('click');
const open = () => {
  tooltipInstance.value?.open();
};
const options: Partial<Options> = { placement: 'right-end', strategy: 'fixed' };
const close = () => {
  tooltipInstance.value?.close();
}
onMounted(() => {
  if (overlayNode.value && triggerNode.value) {
    console.log(111)
    popperInstance = createPopper(triggerNode.value, overlayNode.value, {placement: 'right'})
  }
  setTimeout(() => {
    popperInstance?.setOptions( {
      placement: 'bottom'
    });
    trigger.value = 'hover';
  }, 2000)
})

</script>
<style lang="postcss" scoped>
.lwq-tooltip-demo {
  margin-bottom: 20px;
  .lwq-tooltip {
    margin-right: 10px;
  }
}
</style>